<template>
    <page class="validate-phone">
        <v-back/>
        <div class="validateTip">
            <span>更改手机需进行安全验证，向原有手机<span class="hp">{{hidePhone(userInfo.phone)}}</span>发送验证码</span>
        </div>
        <div class="form">
            <div class="cell-item">
                <span class="cell-item-key">验证码</span>
                <div class="cell-item-value">
                    <div class="input">
                        <input type="number" placeholder="请输入验证码" v-model="sms"/>
                    </div>
                    <div class="change">
                        <a href="javascript: void (0)" @click="sendCode" v-if="!isSend">发送验证码</a>
                        <a href="javascript: void (0)" v-else>{{time}}s</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-group">
            <v-button href="javascript: void (0)" @click="next">下一步</v-button>
        </div>

    </page>
</template>

<script>
    import { NumberKeyboard } from 'vant';
    import { mapGetters } from 'vuex'
    const TIME = 60;
    export default {
        name: "validateTel",
        components: {
            'van-number-keyboard': NumberKeyboard
        },
        computed: {...mapGetters(['wxInfo','userInfo'])},
        data(){
            return{
                isSend: '',
                sms: '',
                show: false,
                time: TIME
            }
        },
        methods: {
            //发送验证码
            async sendCode(){
                try {
                    this.$loading();
                    await this.sendPhone(this.userInfo.phone);
                    this.isSend = true;
                    this.cuntDown();

                }catch (e) {
                    this.$toast.error('获取验证码失败');
                }finally {
                    this.$loading.close();
                }
            },

            //倒计时
            cuntDown(){
                var interval = setInterval(_ => {
                    if(this.time > 1){
                        this.time --;
                    }else {
                        this.time = TIME;
                        this.isSend = false;
                        clearInterval(interval);
                    }
                },1000);
            },


            async next(){
                this.$loading();
                try {
                    const res = await this.$http.post(`/mp/user/validatePhone`,{phone: this.userInfo.phone,code: this.sms});
                    if(res.data){
                        this.$router.push('/changeTel');
                    }else {
                        this.$toast.error('验证失败');
                    }
                }finally {
                    this.$loading.close();
                }


            }
        }
    }
</script>

<style scoped lang="less">
    .validate-phone{
        .validateTip{
            background-color: @page-color;
            padding: 11px;
            margin: 0 10px;
            font-size: @normal;
            border-radius: 4px;
            span{
                color: #999;
            }
        }
        .form{
            margin-top: @padding;
            .cell-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: .48rem;
                padding: 0 @padding;

                &-key{
                    display: block;
                    width: .85rem;
                    min-width: .85rem;
                    text-align: left;
                    color: #333;
                    font-size: @large;
                }
                &-value{
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .input{
                        flex: 1;
                        >input{
                            width: 100%;
                        }
                    }
                    input{
                        color: #333;
                        font-size: @large;
                        outline: none;
                        border: none;
                        height: 100%;
                        &::placeholder{
                            color: #ccc;
                            font-size: @large;
                        }
                    }
                    .change{
                        width: 1rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: .22rem;
                        border-left: 1px solid @border-color;
                        a{
                            color: #1677FF;
                            font-size: @large;
                            font-weight: 400;
                        }
                    }
                }
            }
            .btn-group{
                padding: @padding;
            }
        }
        .btn-group{
            padding: @padding;
        }
    }

</style>
